import styled from "styled-components";

export const FindStyle = styled.div`
    width:100%;
    height:calc(100vh - 3.25rem - 2.8rem );
    margin-top:2.8rem;
    /* .title{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:2.8rem;
        background:red;
        font-size:1.2rem;
        padding-left:.8rem;
    } */
    .container{
        width:94%;
        margin:0 auto;      
        /* background:yellow; */
        .pic{
            display:flex;
            flex-direction:column;
            /* justify-content:center; */
            align-items:center;
            width:100%;
            img{
                margin-top:2rem;
                width:40%;
            }
            .update{
                margin-top:.8rem;
                font-size:.5rem;
                color:#999999;
            }
        }
        .items{
                width:94%;
                margin:0 auto;
            .item{
                display:flex;
                width:100%;
                height:7rem;
                margin-top:2rem;    
                .piccontainer{
                    height:100%;
                    width:30%;
                    overflow:hidden;
                    position:relative;
                    img{
                        width:100%;
                        height:100%;
                        object-fit: cover;
                    }
                    .topnumber{
                        position:absolute;
                        left:5%;
                        bottom:10%;;
                        width:40%;
                        height:1rem;
                        color:#ffffff;
                        font-size:.2rem;
                        background:rgba(0,0,0,.4);
                        text-align:center;
                        line-height:1rem;
                    }
                    .num1{
                        background:#fb7c6c;

                    }
                    .num2{
                        background:#feb978;
                    }
                    .num3{
                        background:#eebc3d;
                    }
                }
                .commentcontainer{
                    height:100%;
                    width:60%;
                    margin-left:6%;  
                    display:flex;
                    flex-direction:column;
                    justify-content:space-between;
                    .title{
                        height:30%;
                        width:100%;
                        display:flex;
                        flex-direction:row;
                        align-items:center;
                        .article{
                            font-weight:700;
                            font-size:1rem;
                        }
                    }
                    .views{
                        width:100%;
                        height:1.5rem;
                        display:flex;
                        flex-direction:row;
                        justify-content:flex-start;
                        align-items:center;
                        .view{  
                            width:20%;
                            height:100%;
                            display:flex;
                            justify-content:center;
                            align-items:center;
                            svg{
                                width:1rem;
                                height:1rem;
                            }
                            .viewnums{
                                color:#99968e;
                                font-size:.5rem;
                            }
                        }
                        .share{
                            margin-left:auto;
                            width:40%;
                            height:100%;
                            display:flex;
                            justify-content:space-between;
                            align-items:center;
                            .clickshare{
                                display:flex;
                                flex-direction:row;
                                svg{
                                    width:1rem;
                                    height:1rem;
                                }
                                .sharename{
                                    color:#99968e;
                                    font-size:.5rem;
                                }

                            }
                            .goods{
                                display:flex;
                                flex-direction:row;
                                justify-content:center;
                                align-items:center;
                                svg{
                                    width:1rem;
                                    height:1rem;
                                }
                                .goodnums{
                                    color:#99968e;
                                    font-size:.5rem;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .pullUpLoading {
        position: absolute;
        bottom: 3.25rem;
        left: 50%;
        transform: translate(-50%);
        img {
            width: 1.5rem;
            height: 1.5rem;
        }
    }

`